From 396acf3bbbe00a192cb0ea0a9ccf91b1d8d2850b Mon Sep 17 00:00:00 2001 From: Fuwn <50817549+Fuwn@users.noreply.github.com> Date: Sat, 24 Jan 2026 13:09:50 +0000 Subject: Initial commit Created from https://vercel.com/new --- src/app/(main)/pixels/[pixelId]/PixelControls.tsx | 32 +++++++++ src/app/(main)/pixels/[pixelId]/PixelHeader.tsx | 19 +++++ .../(main)/pixels/[pixelId]/PixelMetricsBar.tsx | 70 ++++++++++++++++++ src/app/(main)/pixels/[pixelId]/PixelPage.tsx | 34 +++++++++ src/app/(main)/pixels/[pixelId]/PixelPanels.tsx | 83 ++++++++++++++++++++++ src/app/(main)/pixels/[pixelId]/page.tsx | 12 ++++ 6 files changed, 250 insertions(+) create mode 100644 src/app/(main)/pixels/[pixelId]/PixelControls.tsx create mode 100644 src/app/(main)/pixels/[pixelId]/PixelHeader.tsx create mode 100644 src/app/(main)/pixels/[pixelId]/PixelMetricsBar.tsx create mode 100644 src/app/(main)/pixels/[pixelId]/PixelPage.tsx create mode 100644 src/app/(main)/pixels/[pixelId]/PixelPanels.tsx create mode 100644 src/app/(main)/pixels/[pixelId]/page.tsx (limited to 'src/app/(main)/pixels/[pixelId]') diff --git a/src/app/(main)/pixels/[pixelId]/PixelControls.tsx b/src/app/(main)/pixels/[pixelId]/PixelControls.tsx new file mode 100644 index 0000000..55dcd57 --- /dev/null +++ b/src/app/(main)/pixels/[pixelId]/PixelControls.tsx @@ -0,0 +1,32 @@ +import { Column, Row } from '@umami/react-zen'; +import { ExportButton } from '@/components/input/ExportButton'; +import { FilterBar } from '@/components/input/FilterBar'; +import { MonthFilter } from '@/components/input/MonthFilter'; +import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter'; +import { WebsiteFilterButton } from '@/components/input/WebsiteFilterButton'; + +export function PixelControls({ + pixelId: websiteId, + allowFilter = true, + allowDateFilter = true, + allowMonthFilter, + allowDownload = false, +}: { + pixelId: string; + allowFilter?: boolean; + allowDateFilter?: boolean; + allowMonthFilter?: boolean; + allowDownload?: boolean; +}) { + return ( + + + {allowFilter ? :
} + {allowDateFilter && } + {allowDownload && } + {allowMonthFilter && } + + {allowFilter && } + + ); +} diff --git a/src/app/(main)/pixels/[pixelId]/PixelHeader.tsx b/src/app/(main)/pixels/[pixelId]/PixelHeader.tsx new file mode 100644 index 0000000..c771687 --- /dev/null +++ b/src/app/(main)/pixels/[pixelId]/PixelHeader.tsx @@ -0,0 +1,19 @@ +import { IconLabel } from '@umami/react-zen'; +import { LinkButton } from '@/components/common/LinkButton'; +import { PageHeader } from '@/components/common/PageHeader'; +import { useMessages, usePixel, useSlug } from '@/components/hooks'; +import { ExternalLink, Grid2x2 } from '@/components/icons'; + +export function PixelHeader() { + const { formatMessage, labels } = useMessages(); + const { getSlugUrl } = useSlug('pixel'); + const pixel = usePixel(); + + return ( + }> + + } label={formatMessage(labels.view)} /> + + + ); +} diff --git a/src/app/(main)/pixels/[pixelId]/PixelMetricsBar.tsx b/src/app/(main)/pixels/[pixelId]/PixelMetricsBar.tsx new file mode 100644 index 0000000..c9dcd35 --- /dev/null +++ b/src/app/(main)/pixels/[pixelId]/PixelMetricsBar.tsx @@ -0,0 +1,70 @@ +import { LoadingPanel } from '@/components/common/LoadingPanel'; +import { useDateRange, useMessages } from '@/components/hooks'; +import { useWebsiteStatsQuery } from '@/components/hooks/queries/useWebsiteStatsQuery'; +import { MetricCard } from '@/components/metrics/MetricCard'; +import { MetricsBar } from '@/components/metrics/MetricsBar'; +import { formatLongNumber } from '@/lib/format'; + +export function PixelMetricsBar({ + pixelId, +}: { + pixelId: string; + showChange?: boolean; + compareMode?: boolean; +}) { + const { isAllTime } = useDateRange(); + const { formatMessage, labels } = useMessages(); + const { data, isLoading, isFetching, error } = useWebsiteStatsQuery(pixelId); + + const { pageviews, visitors, visits, comparison } = data || {}; + + const metrics = data + ? [ + { + value: visitors, + label: formatMessage(labels.visitors), + change: visitors - comparison.visitors, + formatValue: formatLongNumber, + }, + { + value: visits, + label: formatMessage(labels.visits), + change: visits - comparison.visits, + formatValue: formatLongNumber, + }, + { + value: pageviews, + label: formatMessage(labels.views), + change: pageviews - comparison.pageviews, + formatValue: formatLongNumber, + }, + ] + : null; + + return ( + + + {metrics?.map(({ label, value, prev, change, formatValue, reverseColors }: any) => { + return ( + + ); + })} + + + ); +} diff --git a/src/app/(main)/pixels/[pixelId]/PixelPage.tsx b/src/app/(main)/pixels/[pixelId]/PixelPage.tsx new file mode 100644 index 0000000..7a4ae9d --- /dev/null +++ b/src/app/(main)/pixels/[pixelId]/PixelPage.tsx @@ -0,0 +1,34 @@ +'use client'; +import { Column, Grid } from '@umami/react-zen'; +import { PixelControls } from '@/app/(main)/pixels/[pixelId]/PixelControls'; +import { PixelHeader } from '@/app/(main)/pixels/[pixelId]/PixelHeader'; +import { PixelMetricsBar } from '@/app/(main)/pixels/[pixelId]/PixelMetricsBar'; +import { PixelPanels } from '@/app/(main)/pixels/[pixelId]/PixelPanels'; +import { PixelProvider } from '@/app/(main)/pixels/PixelProvider'; +import { ExpandedViewModal } from '@/app/(main)/websites/[websiteId]/ExpandedViewModal'; +import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart'; +import { PageBody } from '@/components/common/PageBody'; +import { Panel } from '@/components/common/Panel'; + +const excludedIds = ['path', 'entry', 'exit', 'title', 'language', 'screen', 'event']; + +export function PixelPage({ pixelId }: { pixelId: string }) { + return ( + + + + + + + + + + + + + + + + + ); +} diff --git a/src/app/(main)/pixels/[pixelId]/PixelPanels.tsx b/src/app/(main)/pixels/[pixelId]/PixelPanels.tsx new file mode 100644 index 0000000..9cc24c9 --- /dev/null +++ b/src/app/(main)/pixels/[pixelId]/PixelPanels.tsx @@ -0,0 +1,83 @@ +import { Grid, Heading, Tab, TabList, TabPanel, Tabs } from '@umami/react-zen'; +import { GridRow } from '@/components/common/GridRow'; +import { Panel } from '@/components/common/Panel'; +import { useMessages } from '@/components/hooks'; +import { MetricsTable } from '@/components/metrics/MetricsTable'; +import { WorldMap } from '@/components/metrics/WorldMap'; + +export function PixelPanels({ pixelId }: { pixelId: string }) { + const { formatMessage, labels } = useMessages(); + const tableProps = { + websiteId: pixelId, + limit: 10, + allowDownload: false, + showMore: true, + metric: formatMessage(labels.visitors), + }; + const rowProps = { minHeight: 570 }; + + return ( + + + + {formatMessage(labels.sources)} + + + {formatMessage(labels.referrers)} + {formatMessage(labels.channels)} + + + + + + + + + + + {formatMessage(labels.environment)} + + + {formatMessage(labels.browsers)} + {formatMessage(labels.os)} + {formatMessage(labels.devices)} + + + + + + + + + + + + + + + + + + + {formatMessage(labels.location)} + + + {formatMessage(labels.countries)} + {formatMessage(labels.regions)} + {formatMessage(labels.cities)} + + + + + + + + + + + + + + + ); +} diff --git a/src/app/(main)/pixels/[pixelId]/page.tsx b/src/app/(main)/pixels/[pixelId]/page.tsx new file mode 100644 index 0000000..d1db92f --- /dev/null +++ b/src/app/(main)/pixels/[pixelId]/page.tsx @@ -0,0 +1,12 @@ +import type { Metadata } from 'next'; +import { PixelPage } from './PixelPage'; + +export default async function ({ params }: { params: { pixelId: string } }) { + const { pixelId } = await params; + + return ; +} + +export const metadata: Metadata = { + title: 'Pixel', +}; -- cgit v1.2.3